<template>
  <div style="background: #202B61;width: 100%;height: 100%;">
    <!-- 玻璃温室场景设置 -->
    <div style="top: 1%; width: 100%;height: 80vh;float: left;position: absolute;">


      <div class="box1">
        <div class = "title">
          <div style="position: absolute;left: 0%;line-height: 5vh;"><span style="margin-left: 1vh;">温室基本信息</span></div>
        </div>

        <div style="float: left;position: absolute;width: 100%;">
          <el-form ref="form" label-width="150px" label-suffix	=":" align="left"  style="margin-top: 1.5vh;color: #FFFFFF;"  :inline="true" :model="form" >
            <el-form-item  label="温室面积">
              <el-input style="width: 150px;" v-model="form.area">
                <i slot="suffix" style="font-style:normal;margin-right: 10px;">㎡</i>
              </el-input>
            </el-form-item>

            <el-form-item    label="地理位置（经度）">
              <el-input  style="width: 150px;" v-model="form.longitude"></el-input>
            </el-form-item>

            <el-form-item   label="地理位置（纬度）">
              <el-input  style="width: 150px;" v-model="form.latitude"></el-input>
            </el-form-item>

            <el-form-item  label="温室朝向">
              <el-input  style="width: 150px;" v-model="form.orientation"></el-input>
            </el-form-item>
            <el-form-item label-width="180px"   label="跨度">
              <el-input  style="width: 150px;" v-model="form.span">
                <i slot="suffix" style="font-style:normal;margin-right: 10px;">m</i>
              </el-input>
            </el-form-item>
            <el-form-item label="跨数">
              <el-input  style="width: 150px;" v-model="form.span_number"></el-input>
            </el-form-item>
            <el-form-item   label="天沟宽度">
              <el-input  style="width: 150px;" v-model="form.gutter_width">
                <i slot="suffix" style="font-style:normal;margin-right: 10px;">m</i>
              </el-input>
            </el-form-item>

            <el-form-item  label="温室东西长度">
              <el-input  style="width: 150px;" v-model="form.east_west_length">
                <i slot="suffix" style="font-style:normal;margin-right: 10px;">m</i>
              </el-input>
            </el-form-item>

            <el-form-item   label="温室南北长度">
              <el-input  style="width: 150px;" v-model="form.south_north_length">
                <i slot="suffix" style="font-style:normal;margin-right: 10px;">m</i>
              </el-input>
            </el-form-item>

            <el-form-item label-width="180px" label="温室栽培区南北长度">
              <el-input  style="width: 150px;" v-model="form.cultivation_area_length">
                <i slot="suffix" style="font-style:normal;margin-right: 10px;">m</i>
              </el-input>
            </el-form-item>

            <el-form-item label-width="150px" label="温室栽培区东西长度">
              <el-input  style="width: 150px;" v-model="form.cultivation_area_east_west_length">
                <i slot="suffix" style="font-style:normal;margin-right: 10px;">m</i>
              </el-input>
            </el-form-item>

            <el-form-item  label="下沉">
              <el-input  style="width: 150px;" v-model="form.sink">
                <i slot="suffix" style="font-style:normal;margin-right: 10px;">m</i>
              </el-input>
            </el-form-item>

            <el-form-item  label="肩高">
              <el-input  style="width: 150px;" v-model="form.shoulder_height">
                <i slot="suffix" style="font-style:normal;margin-right: 10px;">m</i>
              </el-input>
            </el-form-item>

            <el-form-item  label="脊高">
              <el-input  style="width: 150px;" v-model="form.ridge_height">
                <i slot="suffix" style="font-style:normal;margin-right: 10px;">m</i>
              </el-input>
            </el-form-item>


          </el-form>
        </div>

      </div>




      <div class="box2">
        <div class = "title">
          <div style="position: absolute;left: 0%;line-height: 5vh;"><span style="margin-left: 1vh;">围护结构信息</span></div>
        </div>

        <div style="float: left;position: absolute;width: 100%;">
          <el-form ref="form" label-width="300px" label-suffix	=":" align="left"  style="margin-top: 1.5vh;color: #FFFFFF;"  :inline="true" :model="form" >

            <el-form-item   label="南北方玻璃（长方形）个数">
              <el-input style="width: 70px;" v-model="form.number1"></el-input>
            </el-form-item>

            <el-form-item label-width="100px"  label="所用结构">
              <el-select v-model="form.structure1" placeholder="">
                <el-option
                  v-for="item in structureOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label-width="500px"    label="南北方天窗玻璃（三角形） 个数">
              <el-input style="width: 70px;" v-model="form.number2"></el-input>
            </el-form-item>

            <el-form-item label-width="100px"  label="所用结构">
              <el-select v-model="form.structure2" placeholder="">
                <el-option
                  v-for="item in structureOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>


            <el-form-item label-width="300px"   label="东西方玻璃 个数">
              <el-input style="width: 70px;" v-model="form.number3"></el-input>
            </el-form-item>

            <el-form-item label-width="100px"    label="所用结构">
              <el-select v-model="form.structure3" placeholder="">
                <el-option
                  v-for="item in structureOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label-width="500px"   label="天沟玻璃 个数">
              <el-input style="width: 70px;" v-model="form.number4"></el-input>
            </el-form-item>

            <el-form-item label-width="100px"    label="所用结构">
              <el-select v-model="form.structure4" placeholder="">
                <el-option
                  v-for="item in structureOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>


            <el-form-item label-width="300px"   label="屋顶玻璃（斜）个数">
              <el-input style="width: 70px;" v-model="form.number5"></el-input>
            </el-form-item>

            <el-form-item label-width="100px"    label="所用结构">
              <el-select v-model="form.structure5" placeholder="">
                <el-option
                  v-for="item in structureOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>


            <el-form-item label-width="500px"   label="南北方下沉墙体 个数">
              <el-input style="width: 70px;" v-model="form.number6"></el-input>
            </el-form-item>

            <el-form-item label-width="100px"    label="所用结构">
              <el-select v-model="form.structure6" placeholder="">
                <el-option
                  v-for="item in structureOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>


            <el-form-item label-width="300px"   label="南北方墙体 个数">
              <el-input style="width: 70px;" v-model="form.number7"></el-input>
            </el-form-item>

            <el-form-item label-width="100px"    label="所用结构">
              <el-select v-model="form.structure7" placeholder="">
                <el-option
                  v-for="item in structureOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>


            <el-form-item label-width="500px"   label="东西方下沉墙体 个数">
              <el-input style="width: 70px;" v-model="form.number8"></el-input>
            </el-form-item>

            <el-form-item label-width="100px"    label="所用结构">
              <el-select v-model="form.structure8" placeholder="">
                <el-option
                  v-for="item in structureOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>


            <el-form-item label-width="300px"   label="东西方墙体 个数">
              <el-input style="width: 70px;" v-model="form.number9"></el-input>
            </el-form-item>

            <el-form-item label-width="100px"    label="所用结构">
              <el-select v-model="form.structure9" placeholder="">
                <el-option
                  v-for="item in structureOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>


            <el-form-item label-width="500px"   label="地板 个数">
              <el-input style="width: 70px;" v-model="form.number10"></el-input>
            </el-form-item>

            <el-form-item label-width="100px"    label="所用结构">
              <el-select v-model="form.structure10" placeholder="">
                <el-option
                  v-for="item in structureOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>



          </el-form>
        </div>

      </div>





      <div class="box3">
        <div class = "title">
          <div style="position: absolute;left: 0%; line-height: 5vh;"><span style="margin-left: 1vh;">空调设置</span></div>
        </div>

        <div style="float: left;position: absolute;width: 100%;">
          <el-form ref="form" label-width="300px" label-suffix	=":" align="left"  style="margin-top: 1.5vh;color: #FFFFFF;"  :inline="true" :model="form" >

            <el-form-item   label="最高温度">
              <el-input  v-model="form.max_temperature">
                <i slot="suffix" style="font-style:normal;margin-right: 10px;">℃</i>
              </el-input>
            </el-form-item>


            <el-form-item   label="最低温度">
              <el-input v-model="form.min_temperature">
                <i slot="suffix" style="font-style:normal;margin-right: 10px;">℃</i>
              </el-input>
            </el-form-item>



            <el-form-item   label="换气间隔">
              <el-input  v-model="form.ventilation_interval">
                <i slot="suffix" style="font-style:normal;margin-right: 10px;">小时</i>
              </el-input>
            </el-form-item>

          </el-form>
        </div>

      </div>






    </div>



  </div>
</template>

<script>

  export default {
    name: 'glassGreenhouseSettings',
    data () {
      return {
        form: {
          ws_id : '',//玻璃温室id
          area: '', //温室面积
          latitude: '', //建筑位置（纬度）
          longitude: '', //建筑位置（经度）
          orientation: '', //温室朝向
          span: '', //跨度
          span_number: '', //跨数
          gutter_width: '', //天沟宽度
          east_west_length: '', //温室东西长度
          south_north_length: '', //温室南北长度
          cultivation_area_length: '', //温室栽培区域南北长度
          cultivation_area_east_west_length: '', //温室栽培区域东西长度
          sink: '', //下沉
          shoulder_height: '', //肩高
          ridge_height: '', //脊高


          structureId1 : '',//围护结构信息id
          name1 :'南北方玻璃（长方形）',//南北方玻璃（长方形）
          number1: '', //南北方玻璃（长方形）个数
          structure1: '', //南北方玻璃（长方形）所用结构

          structureId2 : '',//围护结构信息id
          name2 :'南北方天窗玻璃（三角形）',
          number2: '', //南北方玻璃（长方形）个数
          structure2: '', //南北方玻璃（长方形）所用结构

          structureId3 : '',//围护结构信息id
          name3 :'东西方玻璃',
          number3: '', //南北方玻璃（长方形）个数
          structure3: '', //南北方玻璃（长方形）所用结构

          structureId4 : '',//围护结构信息id
          name4 :'天沟玻璃',
          number4: '', //南北方玻璃（长方形）个数
          structure4: '', //南北方玻璃（长方形）所用结构

          structureId5 : '',//围护结构信息id
          name5 :'屋顶玻璃（斜）',
          number5: '', //南北方玻璃（长方形）个数
          structure5: '', //南北方玻璃（长方形）所用结构

          structureId6 : '',//围护结构信息id
          name6 :'南北方下沉墙体',
          number6: '', //南北方玻璃（长方形）个数
          structure6: '', //南北方玻璃（长方形）所用结构

          structureId7 : '',//围护结构信息id
          name7 :'南北方墙体',
          number7: '', //南北方玻璃（长方形）个数
          structure7: '' ,//南北方玻璃（长方形）所用结构

          structureId8 : '',//围护结构信息id
          name8 :'东西方下沉墙体',
          number8: '', //南北方玻璃（长方形）个数
          structure8: '', //南北方玻璃（长方形）所用结构

          structureId9 : '',//围护结构信息id
          name9 :'东西方墙体',
          number9: '', //南北方玻璃（长方形）个数
          structure9: '', //南北方玻璃（长方形）所用结构

          structureId10 : '',//围护结构信息id
          name10 :'地板',
          number10: '', //南北方玻璃（长方形）个数
          structure10: '', //南北方玻璃（长方形）所用结构

          set_id:'',//空调设置id
          max_temperature: '', //最高温度
          min_temperature: '', //最低温度
          ventilation_interval: '' //换气间隔

        },
        structureOption: []
      }
    },
    mounted(){


      var projectId = this.$route.query.projectId;

      var code = "glassStructure";
      //初始化页面下拉
      this.$http.post("/iepsapi/fhfz/sceneSettings/retrievePageOption?code="+code, {}).then((res) => {
        var option = res.data;
        this.structureOption = option;
      });


      //初始化页面参数
      this.$http.post("/iepsapi/fhfz/sceneSettings/initPageParam?projectId="+projectId+"&scene=1", {}).then((res) => {

        var pageParam = res.data;

        if(pageParam!=null&&pageParam!=""){
          //循环遍历赋值
          for(var item in pageParam){
            var value = pageParam[item];
            this.form[item] = value;
          }

        }

        this.$emit('getSettingsParams',this.form);

      })

    },
    methods: {

      buttonClick : function(type){

        if(type=="sceneSettings"){
          $("#sceneSettingsId").css("background","#408AFF");
          $("#simulationResultId").css("background","#202B61");
        }else if(type=="simulationResult"){
          $("#sceneSettingsId").css("background","#202B61");
          $("#simulationResultId").css("background","#408AFF");
        }
      }
    }
  }
</script>

<style scoped >
    /deep/ .el-input__inner {
    -webkit-appearance: none;
    background-color: #161E43;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #161E43;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #4891EE;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
  }


    /deep/ .el-input__inner {
    -webkit-appearance: none;
    background-color: #161E43;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #161E43;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #FFFFFF;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
  }

    /deep/ .el-form-item__label {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    color: #FFF !important;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }


  .box1{
    position: absolute;
    width: 100%;
    /* left: 0.5%; */
    height: 32%;
    background: inherit;
    background-color: rgba(45, 61, 136, 0.6);
    color: white;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(226, 239, 249, 1);
    border : none;
    border-radius: 5px;
    -webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    font-size: 2vh;
    text-align: right;
  }

  .box2{
    position: absolute;
    width: 100%;
    height: 49.5%;
    top: 26.5vh;
    background: inherit;
    background-color: rgba(45, 61, 136, 0.6);
    color: white;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(226, 239, 249, 1);
    border : none;
    border-radius: 5px;
    -webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    font-size: 2vh;
    text-align: right;
  }


  .box3{
    position: absolute;
    width: 100%;
    height: 16%;
    top: 67vh;
    background: inherit;
    background-color: rgba(45, 61, 136, 0.6);
    color: white;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(226, 239, 249, 1);
    border : none;
    border-radius: 5px;
    -webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    font-size: 2vh;
    text-align: right;
  }


  .title{
    width:100%;
    height:5vh;
    line-height: 5vh;
    background:rgba(55, 69, 144, 1);

    font-weight:bold;
    background: inherit;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    font-weight: 700;
    font-style: normal;
    font-size: 1.5vh;
    color: #FFFFFF;
    text-align: left;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(55, 69, 144, 1);
    border-radius: 1px;
    -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.345098039215686);
    -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.345098039215686);
  }


</style>
